<template>
  <view :class="theme">
    <view class="fixed z-999 h-[var(--status-bar-height)]"
      style="background: rgba(0,0,0,0.1); backdrop-filter: blur(2rpx); top: 0; left: var(--window-left); right: var(--window-right);" />

    <swiper class="h-420 b-rounded-16 overflow-hidden" style="margin: 0 0 30rpx;" :indicator-dots="false" :autoplay="true"
      :interval="3000" :duration="600" indicator-active-color="#abaee0" indicator-color="#868686">
      <swiper-item>
        <uv-image radius="16" width="100%" height="100%" :src="include('/static/img/1/5.png')" />
      </swiper-item>
    </swiper>

    <view @click="showStrategy" class="relative">
      <uv-image width="100%" height="230" src="/static/img/1/0.png" mode="scaleFill" />
      <view class="absolute right-36 top-60 wobble">
        <uv-image width="106" height="106" src="/static/img/1/4.png" />
      </view>
    </view>

    <view class="h-330 m-30 flex-row">
      <view @click="uniNavigator({ url: '/pages/client/main/transform?active=1' })" class="flex-1 relative">
        <uv-image width="100%" height="100%" src="/static/img/1/3.png" mode="scaleFill" />
        <!-- <view class="absolute left-30 top-30 fw-bold text-36 italic">
          <text style="
          background: linear-gradient(180deg, #fff 24%, #9eaeff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;">
            龙珠
          </text>
          <text style="
          background: linear-gradient(180deg, #fff 24%, #9eaeff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;">兑换话费</text>
        </view> -->
      </view>

      <view class="ml-20 flex-1">
        <view @click="uniNavigator({ url: '/pages/client/main/pretty-number' })" class="flex-1 relative justify-center">
          <uv-image width="100%" height="100%" src="/static/img/1/1.png" mode="scaleFill" />
          <text class="absolute right-20 fw-bold text-32 italic" style="
          background: linear-gradient(180deg, #fff 24%, #9eaeff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;">
            龙珠兑靓号
          </text>
        </view>
        <view @click="uniNavigator({ url: '/pages/client/mall/goods?title=龙珠换好礼' })"
          class="mt-20 flex-1 relative justify-center">
          <uv-image width="100%" height="100%" src="/static/img/1/2.png" mode="scaleFill" />
          <text class="absolute right-20 fw-bold text-32 italic" style="
          background: linear-gradient(180deg, #fff 24%, #9eaeff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;">
            龙珠换好礼
          </text>
        </view>
      </view>
    </view>

    <view class="m-30 items-center">
      <uv-image width="194" height="38" src="/static/img/1/10.png" />
    </view>

    <view class="flex-row flex-wrap m-30">
      <store-goods-item v-for="(item, index) in goods.list" :key="index" :item="item" :index="index" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { transformURL, uniNavigator } from "@/common/libs/utils";
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);

const goods = reactive({
  list: [],
  limit: 4,
  page: 1
});

const showStrategy = () => {
  const title = "龙之大陆游戏介绍"
  uni.setStorageSync("richText", `<img src="../img/strategy.jpg" width="100%" style="border-radius: 8px;" alt="load error." />`);
  uni.navigateTo({
    url: transformURL("/pages/common/webview",
      {
        title: encodeURIComponent(title),
        url: encodeURIComponent(transformURL("/html/document.html", { title }))
      }
    )
  });
}

onLoad(() => {
  uni.request({
    url: "/goodsLists",
    data: { limit: goods.limit, page: goods.page },
    success({ data }: AnyObject) {
      goods.list = data;
    }
  });
});

</script>


<style>
page {
  background-color: #2a2533;
}
</style>
<style lang="scss" scoped>
// scss

@keyframes wobble {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  to {
    transform: scale(1);
  }
}

.wobble {
  animation: wobble 0.9s ease-in-out infinite;
}
</style>